<!DOCTYPE html>
<html>
<head>
    <title>操作日志</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- 所有的 css & js 资源 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../static/sa.css">
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
    <script src="../../../static/sa.js"></script>
</head>
<body>
<div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class="c-panel">
        <!-- ------------- 检索参数 ------------- -->
        <div class="c-title">操作日志列表</div>
        <el-form>
            <div class="c-item">
                <label class="c-label">用户昵称：</label>
                <el-input v-model="p.username" placeholder="模糊查询"></el-input>
            </div>
            <div class="c-item">
                <label class="c-label">模块类型：</label>
                <el-input v-model="p.remark" placeholder="模糊查询"></el-input>
            </div>
            <div class="c-item">
                <label class="c-label">操作时间：</label>
                <el-date-picker v-model="p.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="操作时间"></el-date-picker>
            </div>
            <div class="c-item" style="min-width: 0px;">
                <el-button type="primary" icon="el-icon-search" @click="p.page = 1; f5()">查询</el-button>
            </div>
            <br />
        </el-form>
        <!-- <div class="c-title">数据列表</div> -->
        <!-- ------------- 数据列表 ------------- -->
        <el-table class="data-table" ref="data-table" :data="dataList" size="small">
            <el-table-column label="编号" prop="id"> </el-table-column>
            <el-table-column label="昵称" prop="username"></el-table-column>
            <el-table-column label="业务模块名" prop="businessName"></el-table-column>
            <el-table-column label="方法名" prop="methodName"></el-table-column>
            <el-table-column label="请求参数" prop="httpParam"></el-table-column>
            <el-table-column label="ip" prop="ip"></el-table-column>
            <el-table-column label="操作状态">
                <template slot-scope="s">
                    <b style="color: green;" v-if="s.row.logStatus == 1">正常</b>
                    <b style="color: red;" v-if="s.row.logStatus == 0">异常</b>
                </template>
            </el-table-column>
            <el-table-column label="返回结果" prop="result"></el-table-column>
            <el-table-column label="错误信息" prop="error"></el-table-column>
            <el-table-column label="模块类型" prop="remark"></el-table-column>
            <el-table-column label="操作时间" prop="operateTime"></el-table-column>
        </el-table>
        <!-- ------------- 分页 ------------- -->
        <div class="page-box">
            <el-pagination background
                           layout="total, prev, pager, next, sizes, jumper"
                           :current-page.sync="p.page"
                           :page-size.sync="p.size"
                           :total="total_record"
                           :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                           @current-change="f5(true)"
                           @size-change="f5(true)">
            </el-pagination>
        </div>
    </div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '.vue-box',
        data: {
            p: {	// 查询参数
                username: '',
                remark: '',
                time: '',
                page: 1,
                size: 10,
            },
            total_record: 0,
            dataList: []
        },
        methods: {
            // 数据刷新
            f5: function() {
                sa.ajax('/api/system/v1/pageListMutipleConditions', this.p, function(res){
                    this.dataList = res.data.current_data;	// 数据
                    this.total_record = res.data.total_record;		// 分页
                    sa.f5TableHeight();		// 刷新表格高度
                }.bind(this));
            },
        },
        created: function(){
            this.f5()
            sa.onInputEnter();		// 监听输入框的回车事件，执行查询
        }
    })
</script>
</body>
</html>
